import React, { Component } from 'react';
import { TradeHoldC } from '../../../components';
import { Button, Form } from 'antd';

class TradeHoldcTest extends Component {
  constructor(props) {
    super(props);
    this.state = {
      p3: '28bfc1416fadb919016fb1480551005e',
      timeStamp: '',
    };

    setTimeout(() => {
      this.setState({
        p4: '28bfc1416fadb919016fb1480551005e',
      });
    }, 2000);
  }

  handleOnChange1 = (e) => {
    console.log('有数据', e);
  };

  handleOnChange2 = (e) => {
    console.log('无数据', e);
  };

  handleOnChange3 = (e) => {
    console.log('同步数据', e);
  };

  handleOnChange4 = (e) => {
    console.log('异步数据', e);
  };

  handleChange1 = () => {
    this.setState({
      p4: '28bfc1416fadb919016fb1480551005e',
    });
  };

  handleChange2 = () => {
    this.setState({
      p4: '9e23ea5e5b494948b0f923705dd2887b',
    });
  };

  handleChange3 = () => {
    this.setState({
      p4: undefined,
    });
  };

  handleOnChangeTime = () => {
    this.setState({
      timeStamp: new Date().getTime(),
    });
    console.log(111, this.state.timeStamp);
  };

  render() {
    return (
      <div>
        <div>无请求展示</div>
        <Form>
          <TradeHoldC onChange={this.handleOnChange1} />
        </Form>
        <div>无数据展示,不展示title</div>
        <Form>
          <TradeHoldC hasHeader={false} portfolio='9e23ea5e5b494948b0f923705dd2887b' tradingcode='510010' exchangecode='101' onChange={this.handleOnChange1} />
        </Form>
        <div>有数据展示</div>
        <Form>
          <TradeHoldC
            portfolio='28bfc1416fadb919016fb1480551005e'
            tradingcode='121007'
            exchangecode='999'
            onChange={this.handleOnChange2}
            timeStamp={this.state.timeStamp}

            // width={'300px'}
          />
        </Form>
        <Button onClick={this.handleOnChangeTime}>点击传时间戳</Button>

        <div>同步数据展示</div>
        <Form>
          <TradeHoldC
            portfolio={this.state.p3}
            onChange={this.handleOnChange3}
            tradingcode='510010'
            exchangecode='101'
            // width={'300px'}
          />
        </Form>
        <div>异步数据展示</div>
        <Form>
          <TradeHoldC
            securityType='1'
            portfolio={this.state.p4}
            onChange={this.handleOnChange4}
            tradingcode='121007'
            exchangecode='999'
            // width={'300px'}
          />
          <Button onClick={this.handleChange1}>点我有数据</Button>
          <Button onClick={this.handleChange2}>点我无数据</Button>
          <Button onClick={this.handleChange3}>点我重置，不传参数</Button>
        </Form>
        <div>同时传productGroupId（产品组id）和portfolio（组合id）,显示蒙版</div>
        <Form>
          <TradeHoldC
            portfolio='28bfc1416fadb919016fb1480551005e'
            type={12}
            productGroupId='155'
            tradingcode='010713'
            exchangecode='101'
            onChange={this.handleOnChange2}
            // width={'300px'}
          />
        </Form>
        <div>根据productGroupId（产品组id）查询持仓可用信息</div>
        <Form>
          <TradeHoldC
            // portfolio='28bfc1416fadb919016fb1480551005e'
            productGroupId='155'
            securityType='1'
            type={12}
            tradingcode='010713'
            exchangecode='101'
            onChange={this.handleOnChange2}
            // width={'300px'}
          />
        </Form>
        <div>港股通模式</div>
        <Form>
          <TradeHoldC
            securityType={'19'}
            portfolio='28bfc1416fadb919016fb1480551005e'
            tradingcode='121007'
            exchangecode='999'
            onChange={this.handleOnChange2}
            hkType={'2'}
            // width={'300px'}
          />
        </Form>
      </div>
    );
  }
}

export default TradeHoldcTest;
